<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*动态背景======线性颜色分布*/
			
			* {
				padding: 0;
				margin: 0;
				outline: 0;
				border: 0;
				box-sizing: border-box;
			}
			
			.body {
				width: 100%;
				height: 100%;
				overflow: hidden;
				text-align: center;
				font-size: 70px;
				color: white;
			}
			
			.body {
				background: -webkit-linear-gradient(66deg, #6fc7b5 0%, #13bdce 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
				background: linear-gradient(66deg, #6fc7b5 0%, #13bdce 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
				background-size: 1000%;
				background-position: 0% 100%;
				-webkit-animation: gradient 8.5s ease-in-out infinite;
				animation: gradient 8.5s ease-in-out infinite;
				position: absolute;
				left: 0;
			}
			
			@-webkit-keyframes gradient {
				50% {
					background-position: 100% 0%;
				}
			}
			
			@keyframes gradient {
				50% {
					background-position: 100% 0%;
				}
			}
			
			.loading {
				width: 100%;
				height: 100%;
			}
			
			.loading * {
				position: fixed;
				left: 50%;
				top: 50%;
				-webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
				transform: translate3d(-50%, -50%, 0) rotate(0deg);
			}
			
			.loading .logo {
				background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/440564/galleria-en.svg");
				background-repeat: no-repeat;
				background-position: center;
				width: 180px;
				height: 100%;
			}
			
			.loading .dots.animate .dot {
				-webkit-animation: loading-block 2.5s ease-in-out 1;
				animation: loading-block 2.5s ease-in-out 1;
			}
			
			.loading .dots.animate .dot:after {
				-webkit-animation: loading-dot 2.5s ease-in-out 1;
				animation: loading-dot 2.5s ease-in-out 1;
			}
			
			.loading .dots .dot {
				width: 300px;
				height: 300px;
			}
			
			.loading .dots .dot:after {
				content: "";
				display: inline-block;
				width: 60px;
				height: 60px;
				background-color: #fff;
				border-radius: 50%;
				position: absolute;
				-webkit-transform: scale(0.17);
				transform: scale(0.17);
			}
			
			.loading .dots .dot:nth-child(1) {
				top: 119px;
				left: -209px;
				-webkit-animation-delay: 0s;
				animation-delay: 0s;
			}
			
			.loading .dots .dot:nth-child(1):after {
				-webkit-transform-origin: top right;
				transform-origin: top right;
				top: 0;
				right: 0;
				-webkit-animation-delay: 0s;
				animation-delay: 0s;
			}
			
			.loading .dots .dot:nth-child(2) {
				top: -161px;
				left: -194px;
				-webkit-animation-delay: 0.25s;
				animation-delay: 0.25s;
			}
			
			.loading .dots .dot:nth-child(2):after {
				-webkit-transform-origin: bottom right;
				transform-origin: bottom right;
				bottom: 0;
				right: 0;
				-webkit-animation-delay: 0.25s;
				animation-delay: 0.25s;
			}
			
			.loading .dots .dot:nth-child(3) {
				top: -161px;
				left: -101px;
				-webkit-animation-delay: 0.5s;
				animation-delay: 0.5s;
			}
			
			.loading .dots .dot:nth-child(3):after {
				-webkit-transform-origin: bottom right;
				transform-origin: bottom right;
				bottom: 0;
				right: 0;
				-webkit-animation-delay: 0.5s;
				animation-delay: 0.5s;
			}
			
			.loading .dots .dot:nth-child(4) {
				top: 116px;
				left: 200px;
				-webkit-animation-delay: 0.75s;
				animation-delay: 0.75s;
			}
			
			.loading .dots .dot:nth-child(4):after {
				-webkit-transform-origin: top left;
				transform-origin: top left;
				top: 0;
				left: 0;
				-webkit-animation-delay: 0.75s;
				animation-delay: 0.75s;
			}
			
			.loading .dots .dot:nth-child(5) {
				top: -161px;
				left: 214px;
				-webkit-animation-delay: 1s;
				animation-delay: 1s;
			}
			
			.loading .dots .dot:nth-child(5):after {
				-webkit-transform-origin: bottom left;
				transform-origin: bottom left;
				bottom: 0;
				left: 0;
				-webkit-animation-delay: 1s;
				animation-delay: 1s;
			}
			
			@-webkit-keyframes loading-block {
				100% {
					-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
					transform: translate3d(-50%, -50%, 0) rotate(360deg);
				}
			}
			
			@keyframes loading-block {
				100% {
					-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
					transform: translate3d(-50%, -50%, 0) rotate(360deg);
				}
			}
			
			@-webkit-keyframes loading-dot {
				50% {
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}
			
			@keyframes loading-dot {
				50% {
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}
			
			
			
			
			
			
			
			
		</style>
	</head>

	<body>

		<div class="body">
			<label>盗墓笔记</label>
		</div>
		<div class="loading">
			<div class='logo'></div>
			<div class='dots animate'>
				<div class='dot'></div>
				<div class='dot'></div>
				<div class='dot'></div>
				<div class='dot'></div>
				<div class='dot'></div>
			</div>
		</div>
		

	</body>
	<script>
		setInterval(function() {
			document.querySelectorAll(".dots")[0].classList.remove('animate');
			setTimeout(function() {
				document.querySelectorAll(".dots")[0].classList.add('animate');
			}, 200);
		}, 3750);
	</script>

</html>